<!-- layout.svelte -->
<script lang="ts">
	import { currentLayout } from '$lib/stores/theme';
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';
	import HorizontalMenu from '$lib/components/Navigation/Menu/HorizontalMenu.svelte';
	import Breadcrumb from '$lib/components/Navigation/Breadcrumb/Breadcrumb.svelte';
	import DraggableNavbar from '$lib/components/Navigation/Navbar/DraggableNavbar.svelte';
	import type { Option } from '$lib/components/Basic/Popover/types';
	import Zone from './Zone.svelte';
	import VerticalMenu from '$lib/components/Navigation/Menu/VerticalMenu.svelte';
	import { type UserInfo } from './+layout.server';
	import { contentRefreshStore } from '$lib/stores/refreshContent';
	import Scrollbar from '$lib/components/Basic/Scrollbar/Scrollbar.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';	

	const { children, data } = $props<{
		children: any; // 根据实际类型调整（如 ReactNode 或 Svelte 子元素类型）
		data: {
			menuItems: Option[];
			userInfo: UserInfo;
			code: String[];
			funcCodes: String[];
		};
	}>();
	// 新增：Drawer 状态（父组件管理，不随布局切换丢失）
	let drawerOpen = $state(false);
	// 新增：控制 Drawer 开关的方法
	const setDrawerOpen = (isOpen: boolean) => {
		drawerOpen = isOpen;
	};
	// 布局模式：left（整体左右）、top（纯上下）、mixed（先上下后左右）
	let layoutMode = $state($currentLayout);
	// 监听布局变化
	currentLayout.subscribe((value) => {
		layoutMode = value;
	});
	// 左侧菜单收缩状态
	let isCollapsed = $state(false);

	// 左侧菜单宽度配置（简化）
	const menuWidth = {
		expanded: 220,
		collapsed: 56
	};

	// 切换左侧菜单收缩/展开
	const toggleMenu = () => {
		isCollapsed = !isCollapsed;
	};
</script>

<!-- 1. 左侧模式：整体左右结构（左菜单 + 右上下区域） -->
{#if layoutMode === 'left'}
	<div class="layout-left">
		<!-- 左侧菜单色块 -->
		<div
			class="left-container"
			style="width: {isCollapsed ? `${menuWidth.collapsed}px` : `${menuWidth.expanded}px`}"
		>
			<div class="aside-top">
				<div class="system-name-container">
					<Icon src="logo/favicon" size="24" style="flex-shrink: 0;"></Icon>
					<span class="system-name"> 东海大自营平台 </span>
				</div>
			</div>
			<VerticalMenu menuItems={data.menuItems} {isCollapsed} label="name" accordion={true} />
			<div class="menu-toggle">
				<RectButton
						onClick={toggleMenu}
						size="md"
						variant="info"
						type="text"
					>
					<div class="btn__content" class:collapsed={isCollapsed}>
						{#if isCollapsed}
							<Icon src="animate/indent-increase-animate" size="15" style="flex-shrink: 0;"></Icon>
						{:else}
							<Icon src="animate/indent-decrease-animate" size="15" style="flex-shrink: 0;"></Icon>
						{/if}
						<span class="btn__label">收起</span>
					</div>
				</RectButton>				
			</div>
		</div>

		<!-- 右侧区域：上下结构（右上色块 + 主内容色块） -->
		<div class="right-container">
			<div class="top-container">
				<div class="top-container--header">
					<div class="header-middle">
						<Breadcrumb></Breadcrumb>
					</div>
					<div class="header-right">
						<Zone {drawerOpen} {setDrawerOpen}></Zone>
					</div>
				</div>
				<div class="top-container--nav">
					<DraggableNavbar></DraggableNavbar>
				</div>
			</div>
			<div class="content-main">
				<div class="content-container">
					<Scrollbar scrollWidth={8}>
						{#key $contentRefreshStore.contentRefreshKey}
							{@render children?.()}
						{/key}
					</Scrollbar>
				</div>
			</div>
		</div>
	</div>
{:else if layoutMode === 'top'}
	<!-- 2. 顶部模式：纯上下结构（顶栏色块 + 主内容色块） -->
	<div class="layout-top">
		<div class="top-container">
			<div class="header-left">
				<Icon src="logo/favicon" size="24"></Icon>
				<span class="system-name"> 东海大自营平台 </span>
			</div>

			<div class="header-middle">
				{#if data.menuItems && data.menuItems.length > 0}
					<HorizontalMenu menuItems={data.menuItems} label="name"></HorizontalMenu>
				{/if}
			</div>
			<div class="header-right">
				<Zone {drawerOpen} {setDrawerOpen}></Zone>
			</div>
		</div>
		<div class="content-main">
			<div class="content-container">
				<Scrollbar scrollWidth={8}>
					{#key $contentRefreshStore.contentRefreshKey}
						{@render children?.()}
					{/key}
				</Scrollbar>
			</div>
		</div>
	</div>
{:else}
	<!-- 3. 混合模式：先上下（顶栏 + 下左右区域） -->
	<div class="layout-mixed">
		<div class="top-container">
			<div class="header-left">
				<div class="system-name-container">
					<Icon src="logo/favicon" size="24"></Icon>
					<span class="system-name"> 东海大自营平台 </span>
				</div>
			</div>
			<div class="header-middle">
				{#if data.menuItems && data.menuItems.length > 0}
					<HorizontalMenu menuItems={data.menuItems} label="name"></HorizontalMenu>
				{/if}
			</div>
			<div class="header-right">
				<Zone {drawerOpen} {setDrawerOpen}></Zone>
			</div>
		</div>

		<!-- 下方左右区域（左二级菜单 + 主内容） -->
		<div class="bottom-container">
			<div
				class="left-container"
				style="width: {isCollapsed ? `${menuWidth.collapsed}px` : `${menuWidth.expanded}px`}"
			>
				<div class="menu-toggle">
					<button class="hover-bg" onclick={toggleMenu}>
						{#if isCollapsed}
							<Icon src="animate/indent-increase-animate" size="18"></Icon>
						{:else}
							<Icon src="animate/indent-decrease-animate" size="18"></Icon>
							<span class="toggleText">收起</span>
						{/if}
					</button>
				</div>
			</div>
			<div class="content-main">
				<div class="content-container">
					<Scrollbar scrollWidth={8}>
						{#key $contentRefreshStore.contentRefreshKey}
							{@render children?.()}
						{/key}
					</Scrollbar>
				</div>
			</div>
		</div>
	</div>
{/if}

<style scoped lang="scss">
	/* 1. 左侧模式：整体左右布局 */
	.layout-left {
		display: flex;
		width: 100%;
		height: 100%;
	}

	/* 2. 顶部模式：纯上下布局 */
	.layout-top {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	/* 3. 混合模式：先上下，再左右 */
	.layout-mixed {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	/* 顶部（顶部模式/混合模式共用） */
	.top-container {
		display: flex;
		flex-direction: column;
		flex-shrink: 0; /* 防止被压缩 */
		background-color: var(--color-page);
		// border-bottom: var(--border);
		.top-container--header {
			display: flex;
			height: 38px;
		}
		.top-container--nav {
			height: 30px;
			background-color: var(--color-page);
		}
	}

	/* 左侧：带收缩动画 */
	.left-container {
		display: flex;
		flex-shrink: 0; /* 防止被压缩 */
		flex-direction: column;
		transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: width;
		overflow: hidden; // 避免收缩时内容溢出
		position: relative;
		background-color: var(--color-page);
		z-index: 9999;
		// border-right: var(--border);
	}
	.layout-left .left-container {
		box-shadow: 8px 0 8px -6px var(--color-shadow);
	}
	.layout-mixed .left-container {
		box-shadow: 0 10px 10px 0 var(--color-shadow);
	}

	/* 主内容色块（所有模式共用） */
	.content-main {
		display: flex;
		padding: 10px;
		height: round(calc(100% - 68px), 1px);
	}

	/* 左侧模式的右侧容器（上下结构） */
	.right-container {
		display: flex;
		flex-direction: column;
		flex: 1; /* 占满右侧剩余宽度 */
	}

	/* 混合模式的右侧容器（上下结构） */
	.bottom-container {
		display: flex;
		flex: 1; /* 占满顶部菜单剩余高度 */
	}
	.aside-top {
		width: 100%;
		height: 46px;
		padding: 0 10px;		
	}
	.system-name-container {
		padding: 0 6px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		overflow: hidden;
		white-space: nowrap;
		color: var(--color-primary-500);
		gap: 6px;
		cursor: pointer;
		.system-name {
			font-size: 16px;
			line-height: 18px;
			font-weight: 600;
		}
	}
	.header-left,
	.header-middle,
	.header-right {
		height: 100%;
		min-width: 150px; // 必须，否则 flex 子项不收缩
		white-space: nowrap;
		display: flex;
		align-items: center;
	}

	.header-left {
		width: 260px;
		display: flex;
		flex-shrink: 0; // 想保留图标/文字不折行就设为 0
		justify-content: center;
	}

	/* 中间菜单区域允许压缩，出省略号 */
	.header-middle {
		flex: 1 1 auto; // 占剩余空间，可收缩
		overflow: hidden;
	}

	.header-right {
		padding: 0 10px;
		justify-content: flex-end;
		flex-shrink: 0; // 想保留图标/文字不折行就设为 0
	}

	/* 菜单收缩/展开按钮 */
	.menu-toggle {
		display: flex;
		align-items: center;
		height: 36px;
		margin-left: 10px;
	}
	.content-container {
		width: 100%;
		height: 100%;
		border-radius: var(--border-radius);
		background-color: var(--color-page);
	}
	.toggleText {
		margin-left: 5px;
		display: inline-block;
		font-size: 15px;
	}
	.btn__content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 13px;
		line-height: 15px;
		transition: width 0.3s ease-in-out;
		will-change: width;
		overflow: hidden;
		width: 46px;		
	}
	.btn__content.collapsed {
		width: 15px;
	}
	.btn__label {
		display: inline-block;
		white-space: nowrap; // 防止文字折行
		margin-left: 5px;
	}
</style>
